<template>
  <el-backtop target=".el-main" :bottom="100" :right="100" ref="backtop" />
  <el-config-provider :locale="locale">
    <div class="opps">
      <el-pagination
        v-model:currentPage="page"
        v-model:page-size="limit"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-config-provider>
</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
  data() {
    return {
      // paging: {
      //   page: this.page,
      //   limit: this.limit,
      // },
    };
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  props: {
    page: Number, //默认第一页
    limit: Number,
    total: Number, //显示几页
  },
  methods: {
    handleSizeChange(val) {
      //页面显示十天数据
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
      if (this.$refs.backtop.$el.data != "v-if") {
        this.$nextTick(() => {
          this.$refs.backtop.$el.click();
        });
      }
    },
  },
};
</script>

<style>
.opps {
  margin: 15px 0px;
}
</style>
